• 今天要介紹的from同樣屬於屬於負責創建資料來源(creation)，事不宜遲，趕緊來學學!

圖片來源: RxJS官網 - from說明

• 定義: from可以將任何資料轉換為observable，包含:

1. array
2. string
3. iterable
4. promise/fetch

case1: from(array)

• from([1,2,3...N])相信聰明的大家一定知道印出來1,2,3...N。
• 我們直接來點不一樣的
  stackblitz

import { from } from 'rxjs';

// observer
const observer = {
  next: (value) => console.log('next', value),
  error: (err) => console.log('error', err),
  complete: () => console.log('complete'),
};

// case1: from(array)
console.log('=> case1: from([1, 2, 3, { one: 1, two: 2 }])');
from([1, 2, 3, { one: 1, two: 2 }, 'ok']).subscribe(observer);

// => case1: from([1, 2, 3, { one: 1, two: 2 }])
// next 1
// next 2
// next 3
// next {one: 1, two: 2}
// next ok
// complete

解析

• array中不管放什麼樣的elemenet，都會完整的一個一個輸出。
• ✍跟昨天介紹的of(data1, data2...dataN)比較一下，from([data1, data2...dataN])處理的資料是array喔!

case2: from(string)

stackblitz

...
//case2:from(string)
console.log("=> case2: from('Hello')");
from('Hello').subscribe(observer);

// next: H
// next: e
// next: l
// next: l
// next: o
// complete

• from(string)印出的結果來看，from會先將string轉為array，變成['H', 'e', 'l', 'l', 'o']，再依序將每個字元輸出，符合它的精神。

case3: iterable

• from會去執行iterable中的每個步驟，並將iterable.next()承接出來，交給observer.next()印出。

stackblitz

...
// case3: iterable
console.log('=> case3: from(iterable)');
function* hello() {
  yield 'A';
  yield 'B';
  yield 'C';
}

const iter = hello();
// quick test iterable
// console.log(iter.next()); // 'A'
// console.log(iter.next()); // 'B'
// console.log(iter.next()); // 'C'

from(iter).subscribe(observer);

// => case3: from(iterable)
// next: 'A'
// next: 'B'
// next: 'C'
// complete

case4: from(promise)

stackblitz

...
// case4: from(promise)
console.log("===> case4: from(promise) ")

const status = true; //<--嘗試著改 true/false
const p = new Promise((resolve, reject) => {
  return status ? resolve('okla') : reject('oops...');
});

// *  promise複習一下
// ** status = true,  印出 [success]:okla
// ** status = false, 印出 [failed]:oops...
// p.then(
//   (resMsg) => console.log('[success]:', resMsg),
//   (rejMsg) => console.log('[failed]:', rejMsg)
// ).catch((err) => console.log('[error]:', err));


// === from(promise) === 
from(p).subscribe(observer);

// ===> case4: from(promise)
// next: okla     <==status = false
// error: oops... <==status = false
// complete

✍不熟悉promise使用的夥伴，可以到我之前寫的 這篇了解一下喔!

case5: 同場加映from(fetch)

• 先幫大家複習一下fetch的用法，跟promise一樣，搭配then及catch服用就OK囉。

fetch('呼叫的網址URL')
.then((resp)=> {
    // process response data
}).catch((err)=> {
    // process error
});

• ✍不過若使用from(promise/fetch)，不需要額外定義，就可直接使用，原因是我們有觀察者observer，會去定義next, error, complete，RxJS會根據回傳的結果，自動呼叫觀察者對應的function，聰明吧!
• 趕緊來看個例子吧!
  stackblitz

...

// case5: from(fetch)
console.log('===> case5: from(fetch) ');
const URL = 'https://catfact.ninja/fact';

// === from(fetch) ===
from(fetch(URL)).subscribe(observer);

• 印出的結果，輕鬆搞定一切!
  

Recap

• 今天學到的from，主要可以處理底下幾種資料:

1. array: 只要是array，他都會一個一個將element原封不動地傳遞給你

• from([data1, data2, ...dataN]) 印出data1, data2...dataN。

2. string: RxJS先將每個字元轉換為array，再一個一個字元傳遞給你。

• from('Hello') => 'H', 'e', 'l', 'l', 'o'

3. iterable:將iterable.next()承接出來，交給observer.next()印出。
4. promise/fetch: from(promise)或from(fetch(URL))，再搭配觀察者observer定義的next, error, complete，就搞定囉!

超猛的你

• 不知不覺來到第七天啦! 這是值得喝采的一天，代表著你克服了各種疑惑，前方的路還很長，堅持下去喔!!!